<template>
 <div>
  <!-- 选择接的人 -->
  <Modal v-model="chooseWhoPickUp" title="选择接待人" @on-cancel="chooseWhoPickUpCancel" width="600" :mask-closable="false" :footerHide="true">
    <div class="subscribeModalStateModal">
      <Form ref="chooseWhoPickUpRef" :model="chooseWhoPickUpForm" :rules="chooseWhoPickUpRules" :label-width="100">
        <FormItem label="选择楼盘" prop="selectRealEstate" style=" margin-top: 16px;">
          <Select v-model="chooseWhoPickUpForm.selectRealEstate" @on-select="selectRealEstateFun" filterable style="width:100%" placeholder="请选择选择楼盘">
            <Option v-for="(item, index) in customerFindBuildingList" :value="item.buildingId" :key="index">{{item.cityName+'-'+item.buildingAlias }}</Option>
          </Select>
        </FormItem>
        <FormItem label="选择角色" prop="chooseRole" v-if="chooseWhoPickUpForm.selectRealEstate">
          <Select v-model="chooseWhoPickUpForm.chooseRole" filterable @on-select="chooseRoleFun" style="width:100%" placeholder="请选择选择角色">
            <Option v-for="(item, index) in chooseRoleList" :value="item.val" :key="item.val">{{ item.name }}</Option>
          </Select>
        </FormItem>
        <FormItem label="选择人员" prop="selectPersonnel" v-if="chooseWhoPickUpForm.chooseRole" class="formItemAvatarUrl">
          <Select v-model="chooseWhoPickUpForm.selectPersonnel" filterable style="width:100%" placeholder="请选择选择人员">
            <Option v-for="(item, index) in receptionistListDtat" :value="item.userId" :key="index"><img :src="item.avatarUrl">{{ item.userName +' - '+ item.phone}}</Option>
          </Select>
        </FormItem>
      </Form>
      <div class="footer">
        <Button @click="chooseWhoPickUpCancel">取消</Button>
        <Button type="info" @click="chooseWhoPickUpOk">保存</Button>
      </div>
    </div>
  </Modal>
 </div>
</template>
<script>
import { businessUsers, customerFindBuildingInfo, businessUserRealEstate} from "@/api/customerManagement.js";
  export default {
    components: {

    },
    props: ['chooseWhoPickUp'],
    data() {
      return {
      	 receptionistListDtat: [],
      	 customerFindBuildingList: [],
         chooseRoleList: [{name: '店长',val: '2'}, {name: '线上顾问',val: '4'}],
      	 chooseWhoPickUpForm: {
	        selectRealEstate: '',
	        chooseRole: '',
	        selectPersonnel: ''
	      },
	      chooseWhoPickUpRules: {
	        selectRealEstate : [
	          { required: true, message: '请选择选择楼盘', trigger: 'change' }
	        ],
	        chooseRole : [
	          { required: true, message: '请选择选择角色', trigger: 'change' }
	        ],
	        selectPersonnel : [
	          { required: true, message: '请选择选择人员', trigger: 'change' }
	        ],
	      },
      }
    },
    methods: {
      chooseWhoPickUpCancel() {
        this.$emit('jieDaiRenCancel')
      },
      chooseWhoPickUpOk() {
        this.$refs.chooseWhoPickUpRef.validate((valid) => {
          if (valid) {
            this.receptionistListDtat.map((item) => {
              if(this.chooseWhoPickUpForm.selectPersonnel == item.userId) {
                let parms = {
                  actualHostNmae: item.userName,
                  actualHost: this.chooseWhoPickUpForm.selectPersonnel
                }
                this.$emit('jieDaiRenOk', parms)
              }
            })
          }
        })
      },
      // 选择人 楼盘
      selectRealEstateFun(val) {
        if (this.chooseWhoPickUpForm.chooseRole) {
          businessUsers({page: 1, rows: 100, buildingId: val.value, positionType: this.chooseWhoPickUpForm.chooseRole}).then(res=>{
            if (res && res.list) {
              this.chooseWhoPickUpForm.chooseRole = ''
              this.chooseWhoPickUpForm.selectPersonnel =''
              this.receptionistListDtat = res.list
            }
          }).catch(err=>{
            this.$Message.error(err)
          })
        }
      },
      // 选择人 角色
      chooseRoleFun(val) {
        if (this.chooseWhoPickUpForm.selectRealEstate) {
          businessUsers({page: 1, rows: 100, buildingId: this.chooseWhoPickUpForm.selectRealEstate, positionType: val.value}).then(res=>{
            if (res && res.list) {
              this.chooseWhoPickUpForm.selectPersonnel =''
              this.receptionistListDtat = res.list
            }
          }).catch(err=>{
            this.$Message.error(err)
          })
        }
      },
    },
    created() {
       //查询中台用户信息
      businessUserRealEstate().then(res=>{
        if (res && res.buildingInfos) {
          let cityCode = []
          if (res.buildingInfos.length > 0) {
            for(let i = 0; i < res.buildingInfos.length; i++) {
              cityCode.push(res.buildingInfos[i].cityCode)
            }
            //当前操作人所在城市楼盘
            customerFindBuildingInfo({cityCodes:cityCode, page: 1, rows: 100}).then(res=>{
              if (res && res.list) {
                this.customerFindBuildingList = res.list
              }
            }).catch(err=>{
              this.$Message.error(err)
            })
          }
        }
      }).catch(err=>{
        this.$Message.error(err)
      })
    },
    watch: {
      chooseWhoPickUp: {
        handler(newVal,oldVal) {
          this.chooseWhoPickUpForm.selectRealEstate = ''
          this.chooseWhoPickUpForm.chooseRole = ''
          this.chooseWhoPickUpForm.selectPersonnel = ''
        }
      }
    }
  }
</script>
<style lang="scss" scoped>
  .footer{
    padding-top: 20px;
    text-align: center;
    button{
      width: 120px;
      margin: 0 10px;
    }
  }
  .formItemAvatarUrl{
    img{
      width: 30px;
      height: 30px;
      margin-right: 10px;
      display: inline-block;
    }
    /deep/ .ivu-select-item{
      display: flex;
      align-items: center;
    }
  }
</style>
